<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册账号</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/join.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <link rel="shortcut icon" href="./images/mycat.png" type="image/x-icon">
</head>

<body>

    <canvas id="cas"></canvas>

    <div id="ckbox">
        <p id="ask"></p>
        <button class="yes" id="ohyes" onclick="toNone()">好的</button>
    </div>
    <div id="shadow"></div>

    <div class="container">
        <div class="myBox" data-tilt data-tilt-max="5" data-tilt-speed="800">
            <div class="joinHeader">
                <div id="back" onclick="location='index.htm'"><svg class="icon" style="color:rgba(15, 155, 255, 0.747); width: 3em;height: 3em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2071"><path d="M512 128c211.74 0 384 172.26 384 384S723.74 896 512 896 128 723.74 128 512s172.27-384 384-384m0-64C264.58 64 64 264.58 64 512s200.58 448 448 448 448-200.58 448-448S759.42 64 512 64zM704 480H397.26L501 376.23A32 32 0 0 0 455.77 331L297.38 489.37s-0.05 0.09-0.09 0.13A32.26 32.26 0 0 0 288 512a32.38 32.38 0 0 0 9.37 22.58L455.77 693A32 32 0 1 0 501 647.76L397.26 544H704a32 32 0 0 0 0-64z" p-id="2072"></path></svg></div>
                <h2 id="done">注册</h2>
            </div>
            <div id="scs">
                <svg style="width: 15em;height: 15em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3346"><path d="M512 512m-448 0a448 448 0 1 0 896 0 448 448 0 1 0-896 0Z" fill="rgba(128, 215, 255, 0.747)" p-id="3347"></path><path d="M466.7 679.8c-8.5 0-16.6-3.4-22.6-9.4l-181-181.1c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l158.4 158.5 249-249c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L489.3 670.4c-6 6-14.1 9.4-22.6 9.4z" fill="#FFFFFF" p-id="3348"></path></svg>
            </div>
            <div id="check"></div>
            <input id="go" type="button" value="马上登录" onclick="location='login.html'">

            <form action="#" class="formgroup" autocomplete="off" id="formgroup">
                <dl class="formgroup-1">
                    <dt>
                        <label for="user_login">用户名:</label>
                    </dt>
                    <dd>
                        <input type="text" id="user_login" placeholder="输入用户名/账号...">
                    </dd>
                </dl>
                <!-- 用户名/用户账号 -->
                <dl class="formgroup-2">
                    <dt>
                        <label for="user_email">邮箱:</label>
                    </dt>
                    <dd>
                        <input type="text" id="user_email" placeholder="输入注册邮箱...">
                    </dd>
                </dl>
                <!-- 用户邮箱 -->
                <dl class="formgroup-3">
                    <dt>
                        <label for="pass">密码:</label>
                    </dt>
                    <dd>
                        <input type="password" id="pass" placeholder="输入密码...">
                        <svg class="icon" id="showpswd" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1992"><path d="M512 352c-89.6 0-160 70.4-160 160s70.4 160 160 160 160-70.4 160-160S601.6 352 512 352zM512 608c-54.4 0-96-41.6-96-96s41.6-96 96-96 96 41.6 96 96S566.4 608 512 608zM956.8 499.2C886.4 320 697.6 192 512 192 297.6 192 153.6 358.4 67.2 496c-6.4 9.6-6.4 22.4 0 32C153.6 665.6 297.6 832 512 832c185.6 0 374.4-128 444.8-307.2C960 515.2 960 508.8 956.8 499.2zM512 768c-176 0-300.8-134.4-377.6-256 76.8-121.6 201.6-256 377.6-256 153.6 0 316.8 108.8 380.8 256C828.8 659.2 665.6 768 512 768z" p-id="1993"></path></svg>
                    </dd>
                </dl>
                <!-- 密码 -->
                <input id="enter" class="enter" type="submit" value="立即注册" onclick="joinOk()">
            </form>
        </div>
    </div>
    <script src="./js/vanilla-tilt.min.js"></script>
    <script src="./js/canvas.js"></script>
    <script>
        var userId = document.getElementById('user_login'),
            mailId = document.getElementById('user_email'),
            paswId = document.getElementById('pass'),
            ckbox = document.getElementById("ckbox"),
            shadow = document.getElementById("shadow"),
            ask = document.getElementById("ask"),
            yes = document.getElementById("ohyes");

        function toBlock() {
            ckbox.style.display = "block";
            shadow.style.display = "block";
        }

        function toNone() {
            ckbox.style.display = "none";
            shadow.style.display = "none";
        }

        $(function() {
            $("#showpswd").on("mouseover", function() {
                $("#pass").prop("type", "text");
            });
            $("#showpswd").on("mouseout", function() {
                $("#pass").prop("type", "password");
            });
        })

        function joinOk() {
            if (userId.value === "") {
                toBlock();
                ask.innerText = "空用户名，请重新输入";
                return 0;
            } else if (mailId.value === "") {
                toBlock();
                ask.innerText = "空邮箱，请重新输入";
                return 0;
            } else if (paswId.value === "") {
                toBlock();
                ask.innerText = "空密码，请重新输入";
                return 0;
            } else {
                ckbox.style.display = "block";
                ask.innerText = "注册成功！您的账号为:" + userId.value;
                yes.addEventListener('click', function() {
                    var arr = new Array("scs", "go");
                    for (var i = 0; i < arr.length; i++) {
                        document.getElementById(arr[i]).style.display = "block";
                    }
                    var arr1 = new Array("back", "formgroup");
                    for (var i = 0; i < arr1.length; i++) {
                        document.getElementById(arr1[i]).style.display = "none";
                    }
                    document.getElementById('scs').style.textAlign = "center";
                    var h2 = document.getElementById('done');
                    h2.innerHTML += "成功";
                })
            }
        }
    </script>
</body>

</html>